<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="提现单类型" prop="type">
				<el-select v-model="queryParams.type">
					<el-option label="全部" value="" />
					<el-option label="余额提现单" value="2" />
					<el-option label="对帐提现单" value="4" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="!getUserInfos.is_supplier" label="关联供应商" prop="supplier_id">
				<el-select
					v-model="queryParams.supplier_id"
					clearable
					placeholder="请输入关键字或选择供应商"
					filterable
					remote
					:remote-method="supplierIdRemoteMethod"
					remote-show-suffix
					:loading="supplierSelect.loading"
					@focus="onSupplierFocus"
				>
					<el-option v-for="item in supplierSelect.options" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- <el-row :gutter="10" class="top-block mt8 mb8">
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row> -->
		<el-tabs type="border-card" v-model="queryParams.status">
			<el-tab-pane label="待审核" name="1" />
			<el-tab-pane label="审核通过" name="2" />
			<el-tab-pane label="审核拒绝" name="3" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column v-if="!getUserInfos.is_supplier" label="关联供应商" align="center" prop="title" />
			<el-table-column label="提现单编号" align="center" prop="withdrawal_no" />
			<el-table-column label="提现单类型" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="结算订单数" align="center" prop="finish_order_num">
				<template #default="{ row }">
					<el-link type="primary" @click="onViewPurchaseOrder(row)">{{ row.finish_order_num }}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="提现货款总额" align="center" prop="money" />
			<el-table-column label="交易手续费" align="center" prop="procedure_money" />
			<el-table-column label="货款应收金额" align="center" prop="money_deserved" />
			<el-table-column label="货款实收金额" align="center" prop="money_reality" />
			<el-table-column label="申请时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
			<el-table-column label="审核时间" align="center" prop="examine_time" :formatter="formatterExamineTime" />
			<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
			<el-table-column label="打款凭证" align="center" prop="voucher">
				<template #default="{ row }">
					<el-avatar v-if="row.voucher" :src="row.voucher" shape="square" />
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column label="拒绝原因" align="center" prop="fail_reason">
				<template #default="{ row }">
					<el-popover v-if="row.fail_reason" placement="top" title="原因" :content="row.fail_reason" :width="200" trigger="hover">
						<template #reference>
							<el-button type="text">查看</el-button>
						</template>
					</el-popover>
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<template v-if="!getUserInfos.is_supplier">
						<el-button v-if="row.status === 1" @click="onAudit(row)" type="text">审核</el-button>
					</template>
					<template v-else>
						<el-popover v-if="row.type !== 4" placement="top" title="收款信息" :width="300" trigger="hover">
							<template #reference>
								<el-button type="text">查看收款信息</el-button>
							</template>
							<div>
								<div><span style="font-weight: bold">结算卡联行号：</span>{{ row.bank_code }}</div>
								<div><span style="font-weight: bold">结算银行卡开户名：</span>{{ row.account_name }}</div>
								<div><span style="font-weight: bold">结算银行卡账号：</span>{{ row.account_no }}</div>
								<!-- <div><span style="font-weight:bold">结算卡类型：</span>{{row.settle_bank_type}}</div> -->
							</div>
						</el-popover>
						<el-button v-else @click="onViewCollectionInfo" type="text">查看收款信息</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<financialWithdrawalAuditDialog ref="financialWithdrawalAuditDialogRef" />
		<viewPurchaseOrderDialog ref="viewPurchaseOrderDialogRef" />
	</el-card>
</template>

<script>
import { ElMessage } from 'element-plus';
import { supplierApi, supplierWithdrawalApi, supplier1Api } from '/@/api/admin';
import { store } from '/@/store';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

import financialWithdrawalAuditDialog from './dailog/financialWithdrawalAuditDialog.vue';
import viewPurchaseOrderDialog from './dailog/viewPurchaseOrderDialog.vue';

const SupplierApi = supplierApi();
const Supplier1Api = supplier1Api();
const SupplierWithdrawalApi = supplierWithdrawalApi();
export default {
	name: 'paymentAudit',
	components: { financialWithdrawalAuditDialog, viewPurchaseOrderDialog },
	data() {
		return {
			showSearch: true,
			queryParams: {
				status: '1',
				type: '',
				supplier_id: '',
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
			supplierSelect: {
				loading: false,
				options: [],
			},
		};
	},
	created() {
		this.getList();
	},
	computed: {
		getUserInfos() {
			return store.state.userInfos.userInfos;
		},
	},
	watch: {
		'queryParams.status'() {
			this.getList();
		},
	},
	methods: {
		/********** 触发事件 **********/
		// 关联供应商获取焦点
		onSupplierFocus() {
			if (!this.queryParams.supplier_id) {
				this._supplierList({ pageNum: 1, pageSize: 10 });
			}
		},
		// 搜索
		onQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 重置
		onResetQuery() {
			this.$refs.queryFormRef.resetFields();
			this.onQuery();
		},
		// 供应商提现记录
		onSupplierWithdrawalRecords() {
			this.$refs.supplierWithdrawalRecordsDialogRf.openDialog();
		},
		// 货款订单
		onViewPurchaseOrder(row) {
			this.$refs.viewPurchaseOrderDialogRef.openDialog(row);
		},
		// 查看收款信息
		onViewCollectionInfo() {
			ElMessage.warning('此货款提现成功后，请去余额查看');
		},
		// 货款审核
		onAudit(row) {
			this.$refs.financialWithdrawalAuditDialogRef.openDialog(row, () => this.getList());
		},

		/********** 方法事件 **********/
		// 刷新列表
		getList() {
			this.loading = true;
			this._supplierWithdrawalList(this.queryParams)
		},
		// 关联供应商搜索
		supplierIdRemoteMethod(query) {
			if (!query) return;
			this._supplierList({ pageNum: 1, pageSize: 10, title: query });
		},
		// 提现单类型字典
		formatterType(row) {
			switch (row.type) {
				case 1:
					return '微信提现单';
				case 2:
					return '余额提现单';
				case 3:
					return '积分提现单';
				case 4:
					return '分账提现单';
				default:
					return '未知错误';
			}
		},
		// 状态字典
		formatterStatus(row) {
			switch (row.status) {
				case 1:
					return '待审核';
				case 2:
					return '审核通过';
				case 3:
					return '审核拒绝';
				default:
					return '未知错误';
			}
		},
		// 申请时间字典
		formatterCreateTime(row) {
			return timeDictionary(row.create_time);
		},
		// 审核时间字典
		formatterExamineTime(row) {
			return timeDictionary(row.examine_time);
		},

		/********** 网络请求 **********/
		// 供应商列表
		_supplierList(params) {
			this.supplierSelect.loading = true;
			SupplierApi.supplierList(params)
				.then((res) => {
					this.supplierSelect.options = res.data.list;
					this.supplierSelect.loading = false;
				})
				.catch(() => (this.supplierSelect.loading = false));
		},
		// 供应商提现记录
		_supplierWithdrawalList(params) {
			let Api = Supplier1Api;
			if (!this.getUserInfos.is_supplier) {
				Api = SupplierWithdrawalApi;
			} else {
				Api = Supplier1Api;
			}
			Api.supplierWithdrawalList(params)
				.then((res) => {
					this.tableList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
				.catch(() => (this.loading = false));
		},
	},
};
</script>
